import React, { Component, Suspense } from 'react'
import {
    Route,
    Switch,
    Redirect //路由重定向组件
} from 'react-router-dom';

export class RouterView extends Component {
    render() {
        // ❤ routerConfig : 
        // 第一次是：app传的整个routerConfig 
        // 第二次是： Home传来的item.children
        const { routerConfig } = this.props;
        return (
            <Suspense fallback="路由加载中">
                <Switch>
                    {routerConfig.length ?
                        routerConfig.map((item, index) => {
                            // console.log("--", item);
                            return item.redirect ? //是否有重定向
                                // 有，跳转 
                                <Redirect
                                    key={index}
                                    to={item.redirect} //to：跳转到指定路径
                                ></Redirect> :
                                // 没有，则渲染 
                                <Route
                                    key={index}
                                    path={item.path}
                                    // component={item.component} //渲染对应的组件文件，不能实现往组件传参
                                    // 在一级路由中，item.component看做Home组件，把item.children传到Home组件里面 
                                    render={(props) => {
                                        // console.log("props", props);
                                        return <item.component
                                            {...props} //【props】是render提供的路由信息，包含跳转方法，路由参数等==== history={props.history} location={props.location} match={props.match}
                                            routerConfig={item.children}></item.component>
                                    }}
                                ></Route>
                        }) : "暂无路由"}
                </Switch>
            </Suspense>
        )
    }
}

export default RouterView